<template>
  <view class="positioning">
		<comHead :title="$t('grzx.dw')" :isLeft="true" :isRight="false"></comHead>
		
		<view class="search">
			<picker class="picker" :range="areaList" :value="index" @change="pickerChange">
				<view class="area-item">
					<text>{{areaList[index]}}</text>
					<image src="https://siha.vxmeng.com/static/privacy/MasterDDSSlicePNG537fbb39019f92777070de6198693665.png" mode="widthFix"></image>
				</view>
			</picker>
			<view class="searchBox">
				<image src="https://siha.vxmeng.com/static/privacy/msearch.png" mode="widthFix"></image>
				<input :v-model="inputVal" type="text" placeholder="小区/写字楼/学校等"/>
			</view>
		</view>
		
    <map class="map" :longitude="longitude" :latitude="latitude" :scale="scale"
      enable-zoom='true' enable-scroll='true'>
    </map>
		
		<view class="list">
			<radio-group name="" @change="radioChange">
				<label v-for="(item, index) in addressList">
					<view class="l">
						<radio :value="index" />
						<image :src="changeImage(index)" mode=""></image>
					</view>
					<view class="r">
						<text>{{item.name}}</text>
						<text>{{item.address}}</text>
					</view>
				</label>
			</radio-group>
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			longitude:"",
			latitude:"", 
			scale: 16,
			inputVal: '',
			radioVal: '',
			index: 0,
			addressList: [
				{
					"name": "张三",
					"address": "北京市朝阳区建国路100号"
				},
				{
					"name": "李四",
					"address": "上海市浦东新区陆家嘴环路200号"
				},
				{
					"name": "王五",
					"address": "广州市天河区珠江新城华夏路50号"
				},
				{
					"name": "赵六",
					"address": "深圳市南山区科技园北区高新中一道10号"
				},
				{
					"name": "刘七",
					"address": "成都市武侯区锦华路300号"
				},
				{
					"name": "陈八",
					"address": "南京市鼓楼区中山路150号"
				}
			],
			areaList: [
			  "北京市",
			  "天津市",
			  "上海市",
			  "重庆市",
			  "哈尔滨市",
			  "长春市",
			  "沈阳市",
			  "大连市",
			  "石家庄市",
			  "郑州市",
			  "武汉市",
			  "长沙市",
			  "广州市",
			  "深圳市",
			  "南京市",
			  "杭州市",
			  "合肥市",
			  "福州市",
			  "厦门市",
			  "南昌市",
			  "济南市",
			  "青岛市",
			  "苏州市",
			  "无锡市",
			  "宁波市",
			  "温州市",
			  "南宁市",
			  "海口市",
			  "成都市",
			  "贵阳市",
			  "拉萨市",
			  "西安市",
			  "兰州市",
			  "西宁市",
			  "银川市",
			  "乌鲁木齐市",
			  "台北市",
			  "香港特别行政区",
			  "澳门特别行政区"
			]
		}
  },
  onLoad() {
		this.getLocationFn()
	},
  methods: {
		pickerChange(e){
			this.index = e.detail.value
		},
		radioChange(e){
			this.radioVal = e.detail.value
		},
		changeImage(n) {
			if (n == this.radioVal) {
				return 'https://siha.vxmeng.com/static/my/selected.png';
			} else {
				return 'https://siha.vxmeng.com/static/my/no-selected.png';
			}
		},
		getLocationFn() {
			uni.getLocation({ 
				// type: 'gcj02',
				type:'wgs84',
				isHighAccuracy: true,
				success: res => {
					this.latitude = res.latitude
					this.longitude = res.longitude
					console.log('经度', this.longitude, '纬度', this.latitude)
				},
				fail: error => {
					console.log(error);
				}
			})
		},
	},
};
</script>

<style lang="less" scoped>
	.positioning{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.search{
			height: 100rpx;
			color: #999999;
			padding: 20rpx 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.picker{
				width: 180rpx;
				height: 60rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.area-item{
					height: 100%;
					display: flex;
					align-items: center;
				}
				image{
					width: 30rpx;
					margin-left: 10rpx;
				}
			}
			.searchBox{
				flex: 1;
				display: flex;
				align-items: center;
				position: relative;
				input{
					flex: 1;
					height: 60rpx;
					font-size: 28rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					text-align: center;
					background: rgb(53,46,64);
				}
				image{
					width: 30rpx;
					position: absolute;
					left: 20rpx;
					top: 16rpx;
				}
			}
		}
		.map{
			width: 100%;
			height: 580rpx;
		}
		.list{
			flex: 1;
			padding: 10rpx 30rpx;
			overflow-y: auto;
			
			label{
				width: 100%;
				height: 128rpx;
				display: flex;
				margin-top: 16rpx;
				border-radius: 20rpx;
				color: #fff;
				// background: linear-gradient(101deg, rgb(34,34,34) 0%, rgba(21,21,21) 100%);
				background: linear-gradient(128deg, rgba(34, 34, 34, 0.3) 0%, rgba(30, 36, 44, 0.35) 102%);
				.l{
					width: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					radio{
						visibility: hidden;
						position: absolute;
					}
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
				.r{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					text{
						&:last-child{
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
